<template>
	<view class="joe-body">
		<view class="place" style="position: absolute;top: 0;left: 0;">
			<view class="scan">
				<view class="icon scan" @tap="scan"></view>
			</view>
			<view class="input">
				<view class="icon search"></view>
				<input placeholder="搜索游戏" @tap="toSearch()" />
			</view>
		</view>
		<view style="position: absolute;top:105upx">
			<joe-game-list v-model="gameList"></joe-game-list>
		</view>
	</view>
</template>

<script>
	import joeGameList from '@/components/joe-game/game-list.vue';
	import {api_game_list} from '@/api/index.js';
	export default {
		components:{
			joeGameList
		},
		data() {
			return {
				gameList: [],
				page:0,
				rows:10,
				group_id:0
			}
		},
		methods: {
			scan() {
				uni.scanCode({
					success: (res) => {
						uni.showToast({
							title: '条码内容：' + res.result
						});
					}
				});
			},
			toSearch(){
				
			},
		},
		onReachBottom:function(){
			uni.showToast({
				title:'正在加载'
			})
			this.page++
			api_game_list(this.group_id,this.page,this.rows).then(res => {
				//this.gameList = res.data.data.list
				let list = res.data.data.list
				list.forEach((item,index)=>{
					this.gameList.push(item)
				})
				//this.gameList.push(res.data.data.list)
			})
		},
		onLoad:function(param){
			this.group_id = param.group_id
			api_game_list(param.group_id,this.page,this.rows).then(res=>{
				this.gameList = res.data.data.list
			})
		}
	}
</script>

<style lang="scss">
	view {
		width: 100%;
	}
	.joe-body{
		padding: 15upx;
	}
	.icon {
		font-family: "HMfont-home" !important;
		font-size: 60upx;
		font-style: normal;
		color: #ffffff;

		&.scan {
			&:before {
				content: "\e69a";
			}
		}

		&.menu {
			&:before {
				content: "\e62b";
			}
		}

		&.search {
			&:before {
				content: "\e628";
			}
		}
	}

	.place {
		/*  #ifdef  APP-PLUS  */
		margin-top: var(--status-bar-height);
		/*  #endif  */
		width: 100%;
		height: 100upx;
		background-color: #ff570a;
		display: flex;
		position: fixed;
		z-index: 100;

		.scan {
			width: 100upx;
			height: 100upx;
			flex-shrink: 1;
			display: flex;
			justify-content: center;
			align-items: center;
		}

		.input {
			width: calc(100% - 200upx);
			display: flex;
			justify-content: center;
			align-items: center;
			position: relative;

			input {
				width: calc(100% - 60upx);
				height: 60upx;
				background-color: #ffffff;
				border-radius: 60upx;
				padding-left: 60upx;
				font-size: 30upx;

			}

			.icon {
				width: 60upx;
				height: 60upx;
				position: absolute;
				color: #a18090;
				z-index: 996;
				top: 20upx;
				left: 0;
				font-size: 40upx;
				display: flex;
				justify-content: center;
				align-items: center;
			}
		}
	}
</style>
